<template id="choose">
    <div>
        <div class="buy_choose">
            <div class="bi_buy_choose">
                <h1>
                    <div class="choose_1"><img class='img_choose' src="../image/xian.jpg" alt=""></div>
                    <span class="choose_3">{{tag1_ad.title}}</span>
                    <div class="choose_2"><img class="img_1_choose" src="../image/xian_1.jpg" alt=""></div>
                </h1>
                <p>大家都在买的人气好货</p>
            </div>

            <div class="tag_1">
                <div class="orange_choose">
                    <img  v-lazy="tag1_ad.url" alt="">
                </div>
                <div class="orange_list_choose">
                    <dl v-for="c in tag1_list">
                        <dt>
                            <img class="img_l1"   v-lazy="c.thumb" alt="" @click="getChoose(c.id)">
                        </dt>
                        <dd>{{c.name}}</dd>
                        <dd><span>{{c.shop_price}}<time>{{c.goods_share}}</time></span><img src="../image/add.jpg" alt="" @click="addCart(c.id,c.thumb)"></dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name :'choose',
        data(){
            return{
                /*   id:this.$route.query.this.ma.id,*/
                tag1_ad:[],
                tag1_list:[],
            }
        },
        mounted:function(){
            let mode1 = 'seven';
            this.GLOBAL.getList(this,mode1,1);
        },
        methods:{
            getChoose:function(id){
                this.$router.push('/shopDetails?goods_id=' + id);
            },
			addCart:function (goods_id,image, number = 1) {
				this.GLOBAL.addCart(this,goods_id,number);
                this.GLOBAL.get_te(image);
			}
			
        }
    }
</script>
<style>
    .orange_list_choose{
        height:2.20rem;
        width:100%;
        display:flex;
        position:relative;
       /* flex-wrap: wrap;*/
        justify-content:flex-start;
    }
    .orange_list_choose dl{
        height:2.20rem;
        width:2.11rem;
     /*   flex:1;*/
    }
    .orange_list_choose dl dt{
        height:1.54rem;
        width:2.11rem;
    }
    .orange_list_choose dl dd:nth-of-type(1){
        height:0.46rem;
        width:2.11rem;
        color:#333;
        font-size:0.2rem;
        text-indent: 0.3rem;
        line-height:0.46rem;
        overflow: hidden; /*自动隐藏文字*/
        text-overflow: ellipsis;/*文字隐藏后添加省略号*/
        white-space: nowrap;/*强制不换行*/
    }
    .orange_list_choose dl dd:nth-of-type(2){
        width:2.11rem;
        height:0.46rem;
        position: relative;


    }
    .orange_list_choose dl dd:nth-of-type(2) span{
        color:#ff7e67;
        font-size:0.18rem;
        display:block;
        width:2.5rem;
        text-indent: 0.3rem;
    }
    .orange_list_choose dl dd:nth-of-type(2) img{
        display:block;
        height:0.23rem;
        width:0.23rem;
        position:absolute;
        top:-1px;
        left:1.68rem;
    }
    .orange_list_choose dl dt img{
        height:1.54rem;
        width:1.54rem;
        display:block;
        margin-left:0.35rem;
    }
    .buy_choose{
        height:6.14rem;
        width:100%;
        border-bottom:0;
        margin-bottom: 0.4rem;
    }
    .bi_buy_choose{
        margin:20px 0;
    }
    .buy_choose h1{
        font-size:0.28rem;
        color: #4a4a4a;
        height:0.42rem;
        line-height:0.42rem;
        /*text-align:center;*/
        width:100%;
       /* position:relative;*/
        display:flex;

    }
    .choose_1{
        flex:1;
        height:0.3rem;
    }
    .choose_2{
        flex:1;
        height:0.3rem;
    }
    .choose_3{
        display:block;
        font-size: 0.32rem;
        color: #4a4a4a;
        line-height: 0.3rem;
        width:auto;
        text-align:center;
    }
    .buy_choose img{
        display:inline-block;
        width:1.8rem;
        height:0.3rem;
       /* position:absolute;*/
    }
    .choose_1 img{
       /* top:0;
        left:0.5rem;*/
        float:right;
    }
    .choose_2{
        float:left;
        /*top:0;
        right:0.5rem;*/
    }
    .buy_choose p{
        height:0.3rem;
        line-height:0.3rem;
        text-align:center;
        color:#afafaf;
        font-size:0.22rem;
    }
    .orange_choose{
        height:2.8rem;
        width:100%;
       /* position:relative;*/
        margin-bottom:0.3rem;
    }
    .orange_choose img{
        height:2.8rem;
        width:100%;
        display:inline-block;
    }
</style>
